/**
 * Displays a iframe to show some page.
 * @param boolean showBroder  whether to show the border
 * @param boolean useRoundCorner  whether to add round corner out the iframe
 * @param integer zIndex z index of the iframe.
 */
var PopUpLayer = function(showBroder, useRoundCorner, zindex) {
    this.index = ++PopUpLayer.index;
    this.showBroder = ('undefined' == typeof(showBroder)) ? false : showBroder;
    this.useRoundCorner = ('undefined' == typeof(useRoundCorner)) ? false : useRoundCorner;
    this.zIndex = ('undefined' == typeof(zindex)) ? 99 : parseInt(zindex);

    if (this.useRoundCorner) {
        document.write(PopUpLayer.roundCornerPrefix.replace(/\{id\}/g, this.index));
    }

    document.write(PopUpLayer.iframeHTML.replace(/\{id\}/g, this.index));

    if (this.useRoundCorner) {
        document.write(PopUpLayer.roundCornerSubfix);
    }

    document.close();

    this.frameElement = document.getElementById('popUpLayer' + this.index);
    this.frameWindow = window.frames['popUpLayer' + this.index];
    this.outerBorder = document.getElementById('roundCorner' + this.index);
    this.frameElement.layer = this;
    this.frameElement.style.top = '0px';
    this.frameElement.style.left = '0px';
    this.srcElement = null;
    this.adjustion = null;
    this.backupOnmouseout = null;
    this.topLayerOffset = null;

    if (this.showBroder) {
        this.frameElement.style.border = '1px #000000 solid';
        this.frameElement.style.padding = '5px';
    }

    if (this.useRoundCorner) {
        this.outerBorder.style.position = 'absolute';
        this.outerBorder.style.visibility = 'hidden';
        this.frameElement.style.visibility = 'inherit';
    }
    else {
        this.frameElement.style.position = 'absolute';
        this.frameElement.style.visibility = 'hidden';
    }

    if (this.zIndex) {
        if (this.useRoundCorner) {
            this.outerBorder.style.zIndex = this.zIndex;
        }
        else {
            this.frameElement.style.zIndex = this.zIndex;
        }
    }
};

/**
 * Shows the cover
 * @param string src The url for the iframe.
 * @return void
 */
PopUpLayer.prototype.show = function(src) {
    if ('undefined' != typeof(src)) {
        this.frameWindow.location.replace(src);
    }
    if (this.useRoundCorner) {
        this.outerBorder.style.visibility = 'visible';
    }
    else {
        this.frameElement.style.visibility = 'visible';
    }
};

/**
 * Hides the iframe.
 * @param string src The url for the iframe.
 * @return void
 */
PopUpLayer.prototype.hide = function(src) {    
    if ('undefined' != typeof(src)) {
        this.frameWindow.location.replace(src);
    }

    if (this.useRoundCorner) {
        this.outerBorder.style.visibility = 'hidden';
        this.outerBorder.style.top = '0px';
        this.outerBorder.style.left = '0px';
    }
    else {
        this.frameElement.style.visibility = 'hidden';
        this.frameElement.style.top = '0px';
        this.frameElement.style.left = '0px';
    }

    this.frameElement.style.width = '10px';
    this.frameElement.style.height = '10px';
}

/**
 * Sets the iframe size
 * @param int width The width for the iframe.
 * @param int height The width for the iframe.
 * @return void
 */
PopUpLayer.prototype.changeSize = function(width, height) {
    this.frameElement.style.width = parseInt(width) + 'px';
    this.frameElement.style.height = parseInt(height) + 'px';
};

/**
 * Adjust popup iframe position to locate within browser window.
 */
PopUpLayer.prototype.adjustPopUpPosition = function() {
    var position = PopUpLayer.getCoordinate(this.srcElement);
    var frameWidth = this.frameElement.offsetWidth;
    var frameHeight = this.frameElement.offsetHeight;
    var eLeft = position.left;
    var eTop = position.top;
    if (this.topLayerOffset != null) {
        eLeft += this.topLayerOffset.left;
        eTop += this.topLayerOffset.top;
    }
    var bodyHeight = document.documentElement.clientHeight;
    var bodyWidth = document.documentElement.clientWidth;
    var scrollBarTop = document.documentElement.scrollTop;
    var scrollBarLeft = document.documentElement.scrollLeft;
    var browserHeight = bodyHeight + scrollBarTop;
    var browserWidth = bodyWidth + scrollBarLeft;
    var adjustionHeight = this.adjustion.height;
    var adjustionWidth = this.adjustion.width;
    if ((browserWidth < (eLeft + frameWidth)) && (eLeft - frameWidth - adjustionWidth) > 0) { //adjust herizontal position
        eLeft = eLeft - frameWidth - this.srcElement.offsetWidth;
        eLeft = Math.max(scrollBarLeft, eLeft);
    }

    if (browserHeight < (eTop + frameHeight)) { //adjust vertical position
        if ((eTop - scrollBarTop - adjustionHeight) > frameHeight) { //enough space above HREF
            adjustionHeight = (adjustionHeight > 40) ? adjustionHeight/2 : adjustionHeight;
            eTop = eTop - frameHeight - adjustionHeight;
        }
        else if (frameHeight > bodyHeight) { //browser window is shorter than the pop-up layer
            eTop = scrollBarTop;
        }
        else {
            eTop = bodyHeight - frameHeight + scrollBarTop;
        }
    }

    var marginTop = position.top - eTop;
    var marginLeft = position.left - eLeft;
    if ((marginTop > 0) && (marginTop < frameHeight) && (marginLeft > 0) && (marginLeft < frameWidth)) {
        this.redirectSrcElement();
    }
    this.changePosition(eTop, eLeft);
};

/**
 * Override onmouseout function when popup layer covers its parent element.
 */
PopUpLayer.prototype.redirectSrcElement = function() {
    if (this.topLayerOffset) return;
    this.backupOnmouseout = this.srcElement.onmouseout;
    var oldFrameOnmouseout = this.frameElement.contentWindow.document.onmouseout;
    this.srcElement.onmouseout = null;
    var obj = this;
    this.frameElement.contentWindow.document.onmouseout = function() {
        if ('function' == typeof(oldFrameOnmouseout)) {
            oldFrameOnmouseout();
        }
        obj.srcElement.onmouseout = obj.backupOnmouseout;
        if ('function' == typeof(obj.srcElement.onmouseout)) {
            obj.srcElement.onmouseout();
        }
        obj.frameElement.contentWindow.document.onmouseout = oldFrameOnmouseout;
    }
};

/**
 * Sets the iframe position.
 * @param int top The top coordinate for the iframe.
 * @param int left The left coordinate for the iframe.
 * @return void
 */
PopUpLayer.prototype.changePosition = function(top, left) {
    if (this.useRoundCorner) {
        this.outerBorder.style.top = parseInt(top) - 10 + 'px';
        this.outerBorder.style.left = parseInt(left) - 10 + 'px';
    }
    else {
        this.frameElement.style.top = parseInt(top) + 'px';
        this.frameElement.style.left = parseInt(left) + 'px';
    }
};

/**
 * Gets the element's left bottom coordinate.
 * @param element element the element in the DOM.
 * @return object
 */
PopUpLayer.getCoordinate = function(element) {
    var position = {'top' : 0, 'left' : 0};

    var eWidth = element.offsetWidth;
    var eHeight = element.offsetHeight;
    var eTop = 0;
    var eLeft = 0;

    do {
        eTop += element.offsetTop;
        eLeft += element.offsetLeft;
        element = element.offsetParent;
    } while(element);

    position.top = eTop + eHeight;
    position.left = eLeft + eWidth;

    return position;
};

/**
 * Gets the distance to the topmost and lefemost of the content currently visible in the window. 
 * @return object
 */
PopUpLayer.getOffset = function() {
    var position = {'left' : 0, 'top' : 0};

    if (!!document.all) {
        position.left = (top.document.documentElement.scrollLeft | top.document.body.scrollLeft);
        position.top = (top.document.documentElement.scrollTop | top.document.body.scrollTop);
    }
    else {
        position.left = top.pageXOffset;
        position.top = top.pageYOffset;
    }

    return position;
}

/**
 * Gets the iframe id
 * @return string
 */
PopUpLayer.prototype.getPopupId = function() {
    return 'popUpLayer' + this.index;
};

/**
 * Gets the element that fired the event.
 * @param event event the event in the DOM.
 * @return element
 */
PopUpLayer.getSrcElement = function(event) {
    var event = event || window.event;
    var element = null;

    if (!!document.all) { // used in IE
        element = event.srcElement;
    }
    else { //DOM level
        element = event.target;
    }

    return element;
}

/**
 * Sets the src element
 * @param element
 */
PopUpLayer.prototype.setSrcElement = function(element) {
    if ('A' != element.nodeName) {
        element = element.parentNode;
    }
    this.srcElement = element;
    this.adjustion = this.getAdjustion(element);
};

/**
 * Gets offset of pop-ups when adjustion is needed.
 * @param element
*/
PopUpLayer.prototype.getAdjustion = function(element) {
    var adjustion = {'width' : 10, 'height' : 10};
    while (element != null && 'TD' != element.nodeName) {
        element = element.parentNode;
    }
    if (element != null) {
        adjustion.width = element.offsetWidth;
        adjustion.height = element.offsetHeight;
    }
    return adjustion;
}

/**
 * Sets height offset of pop-ups.
 * @param adjustHeight
*/
PopUpLayer.prototype.setAdjustionHeight= function(adjustHeight) {
    this.adjustion.height = adjustHeight;
}

/**
 * Sets width offset of pop-ups.
 * @param adjustWidth
*/
PopUpLayer.prototype.setAdjustionWidth= function(adjustWidth) {
    this.adjustion.width = adjustWidth;
}

/**
 * Sets offset of top pop-up layer if a popup layer pops up from another popup layer.
 * @param int eLeft
 * @param int eTop
*/
PopUpLayer.prototype.setTopLayerOffset = function(eLeft, eTop) {
    var _topLayerOffset = {'left' : 0, 'top' : 0};

    _topLayerOffset.left = eLeft;
    _topLayerOffset.top = eTop;
    this.topLayerOffset = _topLayerOffset;
}

PopUpLayer.index = 0;
PopUpLayer.roundCornerPrefix = '<div id="roundCorner{id}" style="visibility:hidden"><table border="0" cellspacing="0" cellpadding="0"><tr><td><div class="round-corner-top"></div><div class="round-corner3"></div><div class="round-corner2"></div><div class="round-corner1"></div></td></tr><tr><td><div class="round-corner-body">';
PopUpLayer.roundCornerSubfix = '</div></td></tr><tr><td><div class="round-corner1"></div><div class="round-corner2"></div><div class="round-corner3"></div><div class="round-corner-bottom"></div></td></tr></table></div>';
PopUpLayer.iframeHTML = '<iframe id="popUpLayer{id}" name="popUpLayer{id}" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="blank.html"></iframe>';